<template>
  <div class="component-makeBudget">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>生成预结算
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <el-tabs
      v-model="typeName"
      type="border-card"
      @tab-click="typeClick"
      class="tabs-header"
      style="width:1200px;margin-top:30px;"
    >
      <el-tab-pane label="生成预结算" name="typeOne">
        <div class="component-listHeader">
          <div class="search-header">
            <div class="left-title">
              <p class="left-text">
                <span class="iconfont">&#xe61e;</span>
                预结算生成
              </p>
              <div class="right">
                <el-button @click="saveThisProject" style="width:130px;">保存该项目</el-button>
                <!-- 表一按钮 -->
                <el-button
                  v-show="activeName=='first'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <el-button
                  v-show="activeName=='first'&& !$route.query.proId"
                  @click="proListInit"
                >选择项目</el-button>
                <!-- 表二按钮 -->
                <el-button
                  v-show="activeName=='second'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <!-- 表三按钮 -->
                <el-button v-show="activeName=='third'" @click="edit(3)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='third'" @click="commit(3)">保存</el-button>
                <!-- 表四按钮 -->
                <el-button v-show="activeName=='fourth'" @click="edit(4)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='fourth'" @click="commit(4)">保存</el-button>
                <!-- 表五按钮 -->
                <el-button
                  v-show="activeName=='fifth'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <!-- <el-button v-show="activeName=='fifth'" @click="edit(5)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='fifth'" @click="commit(5)">保存</el-button>-->
              </div>
            </div>
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
          class="tabs-header"
        >
          <el-tab-pane label="工程预算总表（表一）" name="first">
            <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(1)">设置基础参数</el-button>
            <el-button @click="checkmetar=true">选择项目</el-button>
          </div>
            </div>-->
            <div class="budgets">
              <div class="budget">
                <div class="title">工程预算总表</div>
                <div></div>
              </div>
              <div class="budgetTable">
                <table cellpadding="0" cellspacing="0" border="1">
                  <tr>
                    <th>费用名称</th>
                    <th>需要安装的设备费</th>
                    <th>建筑安装工程费</th>
                    <th>其他费用</th>
                    <th>除税价</th>
                    <th>增值税</th>
                    <th>含税价</th>
                  </tr>
                  <!--v-for="(item,index) in tab1" :key="index"-->
                  <tr v-for="(item,index) in tab1" :key="index">
                    <th style="width: 400px;">{{item.rowName}}</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{{item.taxExcludingPrice}}</td>
                    <td></td>
                    <td></td>
                  </tr>
                  <!--<tr>
                <th style="color:#1abc9c;">总造价：</th>
                <td colspan="6">20000000</td>
                  </tr>-->
                </table>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>预计工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="建筑安装工程费（表二）" name="second">
            <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(2)">设置基础参数</el-button>
          </div>
            </div>-->
            <div class="budgets">
              <div class="dbTable">
                <div class="budgetTable">
                  <table cellpadding="0" cellspacing="0" border="1">
                    <tr>
                      <th>费用名称</th>
                      <th>依据和计算方法</th>
                      <th>合计（元）</th>
                    </tr>
                    <tr v-for="(item,index) in aLists" :key="index">
                      <th>{{item.rowName}}</th>
                      <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                      <td>{{item.taxExcludingPrice}}</td>
                    </tr>
                  </table>
                </div>
                <div class="budgetTable">
                  <table cellpadding="0" cellspacing="0" border="1">
                    <tr>
                      <th>费用名称</th>
                      <th>依据和计算方法</th>
                      <th>合计（元）</th>
                    </tr>
                    <tr v-for="(item,index) in bLists" :key="index">
                      <th>{{item.rowName}}</th>
                      <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                      <td>{{item.taxExcludingPrice}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>预计工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="third">
            <el-dropdown slot="label" trigger="hover" @command="handleCommand">
              <span class="el-dropdown-link">
                <!-- :style="activeName=='third'?'color:#1abc9c;':''" -->
                工程量预算（表三）
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="工程量预算表三甲">工程量预算表三甲</el-dropdown-item>
                <el-dropdown-item command="机械使用费表三乙">机械使用费表三乙</el-dropdown-item>
                <el-dropdown-item command="仪表使用费表三丙">仪表使用费表三丙</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="fl_container">
              <div class="fl_left">{{thirdTitle}}</div>
              <div class="fl_right">
                <!-- <el-button @click="setBaseConfig(3)">设置基础参数</el-button>
            <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="edit(3)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="commit(3)">保存</el-button>-->
              </div>
            </div>
            <div class="table" v-show="thirdTitle=='工程量预算表三甲'">
              <el-table
                ref="multipleTable"
                :data="thirdInfo"
                tooltip-effect="dark"
                :summary-method="getSummaries"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="施工分类" align="center" width="95" prop="budgetItemType">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemType" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="定额编号" align="center" width="120" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaUnit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.num" :disabled="thirdFlag"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单位定额值(工日)技工" align="center" width="140" prop="techWorker">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.techWorker" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值(工日)普工" width="140" prop="normalWorker">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值(工日)技工" width="140" prop="techWorkerTotal">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.techWorkerTotal"
                      :disabled="thirdFlag"
                      type="number"
                      min="0"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值(工日)普工" width="140" prop="normalWorkerTotal">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.normalWorkerTotal"
                      :disabled="thirdFlag"
                      type="number"
                      min="0"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="table" v-show="thirdTitle=='机械使用费表三乙'">
              <el-table
                ref="multipleTable"
                :data="thirdTwoInfo"
                :summary-method="getSummaries"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="机械名称" align="center" width="140" prop="macName">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.price"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.quantityTotal"
                  :disabled="thirdFlag"
                  type="number"
                  min="0"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.costMoney"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
              </el-table>
            </div>
            <div class="table" v-show="thirdTitle=='仪表使用费表三丙'">
              <el-table
                ref="multipleTable"
                :data="thirdThreeInfo"
                tooltip-effect="dark"
                :summary-method="getSummaries"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="仪表名称" align="center" width="140" prop="macName">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.price"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.quantityTotal"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.costMoney"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
              </el-table>
            </div>
            <div class="gcl_footer">
              <div class="gcl_footer_bottom">
                <span>预计工程总造价：</span>
                <span>{{totalBudget|numFilter}}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="fourth">
            <el-dropdown slot="label" trigger="hover" @command="handleCommand1">
              <span class="el-dropdown-link">
                器材预算（表四）
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="width:150px;">
                <el-dropdown-item command="甲供设备">甲供设备</el-dropdown-item>
                <el-dropdown-item command="甲供主材">甲供主材</el-dropdown-item>
                <el-dropdown-item command="乙供主材">乙供主材</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="fl_container">
              <div class="fl_left">{{fourthTitle}}</div>
              <div class="fl_right">
                <!-- <el-button @click="edit(4)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button @click="commit(4)">保存</el-button>-->
              </div>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="fourthInfo"
                tooltip-effect="dark"
                :span-method="arraySpanMethod"
                style="width: 1100px;margin:0 auto"
                :summary-method="getSummaries"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="主要材料" align="center" width="200" prop="typeName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.Name" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="规格程式" align="center" prop="mat">
                  <!-- <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.matId"
                      :disabled="fourthFlag"
                      placeholder="请选择"
                      style="width:335px;"
                    >
                      <el-option
                        v-for="(item,index) in scope.row.matlist"
                        :key="index"
                        :label="item.mat"
                        :value="item.matId"
                      ></el-option>
                    </el-select>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="80" prop="matUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.matUnit" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="150" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="fourthFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单价(元)" align="center" width="150" prop="taxExcludingPrice">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.taxExcludingPrice"
                      :disabled="fourthFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="合计(元)"
                  align="center"
                  width="150"
                  prop="taxExcludingPriceSum"
                >
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.taxExcludingPriceSum" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" prop>
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.data" :disabled="fourthFlag"></el-input>
              </template>
                </el-table-column>-->
              </el-table>
            </div>
            <div class="gcl_footer">
              <div class="gcl_footer_bottom">
                <span>预计工程总造价：</span>
                <span>{{totalBudget|numFilter}}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="工程建设其他费（表五）" name="fifth">
            <div class="fl_container">
              <div class="fl_left"></div>
              <div class="fl_right">
                <!-- <el-button @click="setBaseConfig(5)">设置基础参数</el-button>
            <el-button @click="edit(5)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button @click="commit(5)">保存</el-button>-->
              </div>
            </div>
            <div class="budgets">
              <div class="budget">
                <div class="title">工程建设其他费用表</div>
                <div></div>
              </div>
              <div class="budgetTable procurementListTable">
                <table cellpadding="0" cellspacing="0" border="1">
                  <tr>
                    <th>费用名称</th>
                    <th>除税价</th>
                    <th>增值税</th>
                    <th>含税值</th>
                    <th>备注</th>
                  </tr>
                  <tr v-for="(item,index) in tab1" :key="index">
                    <th style="width: 260px;">{{item.rowName}}</th>
                    <!-- <td
                  style="width: 200px;"
                  v-if="item.rowCode == 'B5_ex_8' || item.rowCode == 'B5_ex_17'"
                >
                  <el-input
                    style="text-align: center;"
                    v-model="item.taxExcludingPrice"
                    :disabled="fifthFlag"
                  ></el-input>
                    </td>-->
                    <td style="width: 200px;">{{item.taxExcludingPrice}}</td>
                    <!-- v-if="item.rowCode != 'B5_ex_8' && item.rowCode != 'B5_ex_17'" -->
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                  </tr>
                </table>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>预计工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="生成终结算" name="typeTwo">
        <div class="component-listHeader">
          <div class="search-header">
            <div class="left-title">
              <p class="left-text">
                <span class="iconfont">&#xe61e;</span>
                终结算生成
              </p>
              <div class="right">
                <el-button @click="saveThisProject" style="width:130px;">保存该项目</el-button>
                <!-- 表一按钮 -->
                <el-button
                  v-show="activeName=='first'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <!-- <el-button v-show="activeName=='first'" @click="proListInit">选择项目</el-button> -->
                <!-- 表二按钮 -->
                <el-button
                  v-show="activeName=='second'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <!-- 表三按钮 -->
                <el-button v-show="activeName=='third'" @click="edit(3)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='third'" @click="commit(3)">保存</el-button>
                <!-- 表四按钮 -->
                <el-button v-show="activeName=='fourth'" @click="edit(4)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='fourth'" @click="commit(4)">保存</el-button>
                <!-- 表五按钮 -->
                <el-button
                  v-show="activeName=='fifth'"
                  @click="baseConfigSelect"
                  style="width:130px;"
                  class="iconfont"
                >&#xe628; 设置基础参数</el-button>
                <!-- <el-button v-show="activeName=='fifth'" @click="edit(5)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
                <el-button style="width:70px;" v-show="activeName=='fifth'" @click="commit(5)">保存</el-button>-->
              </div>
            </div>
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
          class="tabs-header"
        >
          <el-tab-pane label="工程预算总表（表一）" name="first">
            <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(1)">设置基础参数</el-button>
            <el-button @click="checkmetar=true">选择项目</el-button>
          </div>
            </div>-->
            <div class="budgets">
              <div class="budget">
                <div class="title">工程预算总表</div>
                <div></div>
              </div>
              <div class="budgetTable">
                <table cellpadding="0" cellspacing="0" border="1">
                  <tr>
                    <th>费用名称</th>
                    <th>需要安装的设备费</th>
                    <th>建筑安装工程费</th>
                    <th>其他费用</th>
                    <th>除税价</th>
                    <th>增值税</th>
                    <th>含税价</th>
                  </tr>
                  <!--v-for="(item,index) in tab1" :key="index"-->
                  <tr v-for="(item,index) in tab1" :key="index">
                    <th style="width: 400px;">{{item.rowName}}</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{{item.taxExcludingPrice}}</td>
                    <td></td>
                    <td></td>
                  </tr>
                  <!--<tr>
                <th style="color:#1abc9c;">总造价：</th>
                <td colspan="6">20000000</td>
                  </tr>-->
                </table>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>最终工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="建筑安装工程费（表二）" name="second">
            <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(2)">设置基础参数</el-button>
          </div>
            </div>-->
            <div class="budgets">
              <div class="dbTable">
                <div class="budgetTable">
                  <table cellpadding="0" cellspacing="0" border="1">
                    <tr>
                      <th>费用名称</th>
                      <th>依据和计算方法</th>
                      <th>合计（元）</th>
                    </tr>
                    <tr v-for="(item,index) in aLists" :key="index">
                      <th>{{item.rowName}}</th>
                      <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                      <td>{{item.taxExcludingPrice}}</td>
                    </tr>
                  </table>
                </div>
                <div class="budgetTable">
                  <table cellpadding="0" cellspacing="0" border="1">
                    <tr>
                      <th>费用名称</th>
                      <th>依据和计算方法</th>
                      <th>合计（元）</th>
                    </tr>
                    <tr v-for="(item,index) in bLists" :key="index">
                      <th>{{item.rowName}}</th>
                      <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                      <td>{{item.taxExcludingPrice}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>最终工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="third">
            <el-dropdown slot="label" trigger="hover" @command="handleCommand">
              <span class="el-dropdown-link">
                <!-- :style="activeName=='third'?'color:#1abc9c;':''" -->
                工程量预算（表三）
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="工程量预算表三甲">工程量预算表三甲</el-dropdown-item>
                <el-dropdown-item command="机械使用费表三乙">机械使用费表三乙</el-dropdown-item>
                <el-dropdown-item command="仪表使用费表三丙">仪表使用费表三丙</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="fl_container">
              <div class="fl_left">{{thirdTitle}}</div>
              <div class="fl_right">
                <!-- <el-button @click="setBaseConfig(3)">设置基础参数</el-button>
            <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="edit(3)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="commit(3)">保存</el-button>-->
              </div>
            </div>
            <div class="table" v-show="thirdTitle=='工程量预算表三甲'">
              <el-table
                ref="multipleTable"
                :data="thirdInfo"
                tooltip-effect="dark"
                :summary-method="getSummaries"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="施工分类" align="center" width="95" prop="budgetItemType">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemType" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="定额编号" align="center" width="120" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaUnit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.num" :disabled="thirdFlag"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单位定额值(工日)技工" align="center" width="140" prop="techWorker">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.techWorker" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值(工日)普工" width="140" prop="normalWorker">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值(工日)技工" width="140" prop="techWorkerTotal">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.techWorkerTotal"
                      :disabled="thirdFlag"
                      type="number"
                      min="0"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值(工日)普工" width="140" prop="normalWorkerTotal">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.normalWorkerTotal"
                      :disabled="thirdFlag"
                      type="number"
                      min="0"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="table" v-show="thirdTitle=='机械使用费表三乙'">
              <el-table
                ref="multipleTable"
                :data="thirdTwoInfo"
                :summary-method="getSummaries"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="机械名称" align="center" width="140" prop="macName">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.price"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.quantityTotal"
                  :disabled="thirdFlag"
                  type="number"
                  min="0"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.costMoney"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
              </el-table>
            </div>
            <div class="table" v-show="thirdTitle=='仪表使用费表三丙'">
              <el-table
                ref="multipleTable"
                :data="thirdThreeInfo"
                tooltip-effect="dark"
                :summary-method="getSummaries"
                style="width: 1100px;margin:0 auto"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="100" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="仪表名称" align="center" width="140" prop="macName">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.price"
                      :disabled="thirdFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.quantityTotal"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
                  <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  min="0"
                  v-model="scope.row.costMoney"
                  :disabled="thirdFlag"
                ></el-input>
                  </template>-->
                </el-table-column>
              </el-table>
            </div>
            <div class="gcl_footer">
              <div class="gcl_footer_bottom">
                <span>最终工程总造价：</span>
                <span>{{totalBudget|numFilter}}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="fourth">
            <el-dropdown slot="label" trigger="hover" @command="handleCommand1">
              <span class="el-dropdown-link">
                器材预算（表四）
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="width:150px;">
                <el-dropdown-item command="甲供设备">甲供设备</el-dropdown-item>
                <el-dropdown-item command="甲供主材">甲供主材</el-dropdown-item>
                <el-dropdown-item command="乙供主材">乙供主材</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="fl_container">
              <div class="fl_left">{{fourthTitle}}</div>
              <div class="fl_right">
                <!-- <el-button @click="edit(4)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button @click="commit(4)">保存</el-button>-->
              </div>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="fourthInfo"
                tooltip-effect="dark"
                :span-method="arraySpanMethod"
                style="width: 1100px;margin:0 auto"
                :summary-method="getSummaries"
                border
                show-summary
                sum-text="总计"
              >
                <el-table-column label="主要材料" align="center" width="200" prop="typeName">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.Name" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="规格程式" align="center" prop="mat">
                  <!-- <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.matId"
                      :disabled="fourthFlag"
                      placeholder="请选择"
                      style="width:335px;"
                    >
                      <el-option
                        v-for="(item,index) in scope.row.matlist"
                        :key="index"
                        :label="item.mat"
                        :value="item.matId"
                      ></el-option>
                    </el-select>
                  </template>-->
                </el-table-column>
                <el-table-column label="单位" align="center" width="80" prop="matUnit">
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.matUnit" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <el-table-column label="数量" align="center" width="150" prop="num">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.num"
                      :disabled="fourthFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单价(元)" align="center" width="150" prop="taxExcludingPrice">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      min="0"
                      v-model="scope.row.taxExcludingPrice"
                      :disabled="fourthFlag"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="合计(元)"
                  align="center"
                  width="150"
                  prop="taxExcludingPriceSum"
                >
                  <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.taxExcludingPriceSum" :disabled="fourthFlag"></el-input>
                  </template>-->
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" prop>
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.data" :disabled="fourthFlag"></el-input>
              </template>
                </el-table-column>-->
              </el-table>
            </div>
            <div class="gcl_footer">
              <div class="gcl_footer_bottom">
                <span>最终工程总造价：</span>
                <span>{{totalBudget|numFilter}}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="工程建设其他费（表五）" name="fifth">
            <div class="fl_container">
              <div class="fl_left"></div>
              <div class="fl_right">
                <!-- <el-button @click="setBaseConfig(5)">设置基础参数</el-button>
            <el-button @click="edit(5)">{{editBtn?'编辑':'取消'}}</el-button>
                <el-button @click="commit(5)">保存</el-button>-->
              </div>
            </div>
            <div class="budgets">
              <div class="budget">
                <div class="title">工程建设其他费用表</div>
                <div></div>
              </div>
              <div class="budgetTable procurementListTable">
                <table cellpadding="0" cellspacing="0" border="1">
                  <tr>
                    <th>费用名称</th>
                    <th>除税价</th>
                    <th>增值税</th>
                    <th>含税值</th>
                    <th>备注</th>
                  </tr>
                  <tr v-for="(item,index) in tab1" :key="index">
                    <th style="width: 260px;">{{item.rowName}}</th>
                    <!-- <td
                  style="width: 200px;"
                  v-if="item.rowCode == 'B5_ex_8' || item.rowCode == 'B5_ex_17'"
                >
                  <el-input
                    style="text-align: center;"
                    v-model="item.taxExcludingPrice"
                    :disabled="fifthFlag"
                  ></el-input>
                    </td>-->
                    <td style="width: 200px;">{{item.taxExcludingPrice}}</td>
                    <!-- v-if="item.rowCode != 'B5_ex_8' && item.rowCode != 'B5_ex_17'" -->
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                    <td>
                      <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                    </td>
                  </tr>
                </table>
              </div>
              <div class="gcl_footer">
                <div class="gcl_footer_bottom">
                  <span>最终工程总造价：</span>
                  <span>{{totalBudget|numFilter}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!--设置基础参数-->
    <div class="component-model">
      <div class="baseModel">
        <el-dialog title="设置基础参数" :visible.sync="baseConfig" width="500px">
          <div class="ticket_top">
            <el-form
              :model="baseConfigInfo"
              ref="baseConfigForm"
              label-width="160px"
              style="width:350px;margin:20px auto;"
              :rules="rules"
            >
              <el-form-item label="跳纤点数量：" prop="skipfiber">
                <el-input v-model="baseConfigInfo.skipfiber" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="施工折扣率：" prop="workDiscount">
                <el-input v-model="baseConfigInfo.workDiscount" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="SLA点数是否超时：" prop="slaTimeout">
                <el-select
                  v-model="baseConfigInfo.slaTimeout"
                  placeholder="请选择"
                  style="width:200px;"
                  clearable
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="施工单位税率：" prop="taxRate">
                <el-input v-model="baseConfigInfo.taxRate" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="零星材料/资料录入：" prop="materialInput">
                <el-input v-model="baseConfigInfo.materialInput" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="设计院是否出图：" prop="disignerProvider" style="width: 163px;">
                <el-select
                  v-model="baseConfigInfo.disignerProvider"
                  placeholder="请选择"
                  style="width:200px;"
                  clearable
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否家宽：" prop="homeBroadband" style="width: 163px;">
                <el-select
                  v-model="baseConfigInfo.homeBroadband"
                  placeholder="请选择"
                  style="width:200px;"
                  clearable
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="勘察费：" prop="surveyCost">
                <el-input v-model="baseConfigInfo.surveyCost" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="预算降点数：" prop="dropPoint">
                <el-input v-model="baseConfigInfo.dropPoint" style="width:200px;"></el-input>
              </el-form-item>
              <!-- <el-form-item label="设计费降点数：" prop="calc">
                <el-input v-model="baseConfigInfo.sell" style="width:200px;"></el-input>
              </el-form-item>-->
              <!-- <el-form-item label="监理费降点数：" prop="calc">
                <el-input v-model="baseConfigInfo.sell" style="width:200px;"></el-input>
              </el-form-item>-->
              <el-form-item label="大型施工机械吨数：" prop="macTon">
                <el-input v-model="baseConfigInfo.macTon" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item label="总户数：" prop="totalHouse">
                <el-input v-model="baseConfigInfo.totalHouse" style="width:200px;"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="baseConfig = false">取消</el-button>
            <el-button @click="submitForm('baseConfigForm')">提交</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <!-- 选择项目 弹窗  -->

    <div class="component-model">
      <el-dialog title="选择材料" :visible.sync="choosePro" width="950px">
        <div class="ticket_bottom">
          <div class="table" style="width:900px;">
            <el-table ref="multipleTable" :data="chooseProInfo" tooltip-effect="dark" style border>
              <el-table-column label="项目名称" align="center" width="500" prop="proName"></el-table-column>
              <!-- <el-table-column label="工作量合计" align="center" prop="orgName"></el-table-column> -->
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!--<a @click="disedit = true;edithand(scope.row)">选择该项目</a>-->
                  <!-- <a @click="selectMaterial(scope.row.proId)">配置材料属性</a>&nbsp; -->
                  <a @click="chooseThisPro(scope.row.proId)">选择该项目</a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="underTable">
          <!-- <div style="color:#1abc9c;margin-left:600px;">提示：选择项目前必须先配置材料属性！</div> -->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="choosePro = false">取消</el-button>
          <!-- <el-button @click="choosePro = false;">确定</el-button> -->
        </span>
      </el-dialog>
    </div>

    <!-- 配置材料属性 -->
    <!-- <div class="component-model">
      <el-dialog title="配置材料属性" :visible.sync="disedit" width="950px">
        <div class="ticket_bottom">
          <div class="table" style="width:900px;">
            <el-table
              ref="multipleTable"
              :data="diseditInfo"
              tooltip-effect="dark"
              style
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" align="center" width="50"></el-table-column>
              <el-table-column label="材料名称" align="center" prop="typeName"></el-table-column>
              <el-table-column label="数量" align="center" width="100" prop="num"></el-table-column>
              <el-table-column label="材料归属" align="center" width="110" prop="matType"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="underTable" style="text-align:left;">
          <el-button @click="updateMaterial('0')">归属甲供设备</el-button>
          <el-button @click="updateMaterial('1')">归属甲供主材</el-button>
          <el-button @click="updateMaterial('2')">归属乙供主材</el-button>
        </div>
        <span slot="footer">
          <el-button @click="disedit = false">取消</el-button>
        </span>
      </el-dialog>
    </div>-->
  </div>
</template>

<script>
import { log } from "util";
export default {
  name: "contractList",
  data() {
    return {
      // 当前选的项目id
      currentProId: "",
      // 当前的type
      currentType: "1",
      // 配置材料弹窗bool值 --- 弹窗列表数据
      disedit: false,
      diseditProId: "",
      diseditInfo: [],
      // 配置材料弹窗 -- 勾选的数据
      chooseMaterial: [],

      // 选项卡值
      activeName: "first",
      //表一/表五的数据
      tab1: [],
      //表二左侧的数据
      aLists: [],
      //表二右侧的数据
      bLists: [],
      // third 表三甲 乙 丙表格数据 表格title 表格编辑flag
      thirdInfo: [],
      thirdTwoInfo: [],
      thirdThreeInfo: [],
      thirdFlag: true,
      thirdTitle: "工程量预算表三甲",
      // fourth 表格数据
      fourthInfo: [],
      fourthFlag: true,
      fourthTitle: "甲供设备",
      //表五sub title
      fifth: "",
      fifthFlag: true,
      // info: [],
      // 预计工程总造价
      totalBudget: "待计算",
      //是否可编辑
      editBtn: true,
      // 基础参数 弹窗bool值---弹窗列表数据
      baseConfig: false,
      baseConfigInfo: {},
      // 选择项目 弹窗bool值---弹窗列表数据
      choosePro: false,
      chooseProInfo: [],
      // 表单验证
      rules: {
        skipfiber: [
          { required: true, message: "请输入跳纤点数量", trigger: "blur" }
        ],
        workDiscount: [
          { required: true, message: "请输入施工折扣率", trigger: "blur" }
        ],
        taxRate: [
          { required: true, message: "请输入施工单位税率", trigger: "blur" }
        ],
        slaTimeout: [{ required: true, message: " ", trigger: "change" }],
        macTon: [{ required: true, message: "请输入吨数", trigger: "blur" }],
        totalHouse: [
          { required: true, message: "请输入总户数", trigger: "blur" }
        ],
        materialInput: [
          {
            required: true,
            message: "请输入零星材料、资料录入",
            trigger: "blur"
          }
        ],
        disignerProvider: [{ required: true, message: " ", trigger: "change" }],
        dropPoint: [
          { required: true, message: "请输入降点数", trigger: "blur" }
        ],
        totalHouse: [
          { required: true, message: "请输入总户数", trigger: "blur" }
        ],
        surveyCost: [
          { required: true, message: "请输入勘察费", trigger: "blur" }
        ],
        homeBroadband: [{ required: true, message: " ", trigger: "change" }]
      },

      maxArr: [],
      max: "",

      typeName: "typeOne" //外层选项卡name值
    };
  },
  created() {
    // 根据传的参数设置data中的当前项目id（currentId）和当前结算类型（currentType-‘1’代表预结算，‘2’代表终结算）
    // 从项目列表点击 生成预结算 则$route.query.proType = 1
    // 从结算列表点击 生成终结算 则$route.query.proType = 2
    // 直接点击生成结算 则$route.query.proType = undefined，则给与默认值 1
    this.currentProId = this.$route.query.proId;
    this.currentType = this.$route.query.proType || "1";
    // 如果有路由参数 则表示有选中proid 直接调计算接口，然后调查询接口（fn chooseThisPro内suCb中有处理）
    if (this.$route.query.proId) {
      this.chooseThisPro(this.currentProId);
    }
    // 根据proType 判断现在选项卡显示预结算还是终结算，嵌套三元表达式
    // 如果路由有参数，则是one或者two，没有路由参数则是预结算，值为two
    this.typeName = this.$route.query.proId
      ? this.$route.query.proType == "1"
        ? "typeOne"
        : "typeTwo"
      : "typeOne";
  },
  mounted() {},
  methods: {
    // 外层选项卡切换函数
    typeClick() {
      this.currentType = this.typeName == "typeOne" ? "1" : "2";
      // 先根据外层选项卡的name值来判断当前类型currentType是1还是2
      // 如果 1.当前选项卡是预结算 且 当前类型 和 路由传参类型一致
      //      2.当前选项卡是终结算 且 当前类型 和 路由传参类型一致
      //      3.当前选项卡是预结算 且 路由没有传参
      //  则直接调用表一查询（此时当前currentId一定有值且不为空字符串）
      if (
        (this.typeName == "typeOne" &&
          this.currentType == this.$route.query.proType) ||
        (this.typeName == "typeTwo" &&
          this.currentType == this.$route.query.proType) ||
        (!this.$route.query.proId && this.currentType == "1")
      ) {
        this.tabClick("1.1");
      } else if (!this.$route.query.proId && this.currentType == "2") {
        // 当没有路由传参 且 用户点击终结算后 ---> 当前类型为 2
        // 提示用户 现在只能进行预结算
        this.$erMsg("当前只能进行预结算!");
      } else {
        // 当 有路由传参 且 用户点击终结算后 ---> 当前类型为 2
        // 提示用户 现在只能进行预结算
        // 否则提示 现在只能进行终结算
        let msg =
          this.$route.query.proType == "1"
            ? "当前只能进行预结算!"
            : "当前只能进行终结算!";
        this.$erMsg(msg);
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //        console.log(rowIndex)
      //      console.log(this.maxArr)
      //      this.maxArr.push(rowIndex);
      //      this.max = Math.max(this.maxArr)
      //      console.log(this.max)
      //      if (rowIndex % 2 === 0) {
      //        if (columnIndex === 0) {
      //          return [1,7];
      //        } else if (columnIndex === 1) {
      //          return [0, 0];
      //        }
      //      }
    },
    // 选择项目 - 项目列表查询
    proListInit() {
      this.choosePro = true;
      let that = this,
        suCb = res => {
          console.log(res.data);
          that.chooseProInfo = res.data.data;
        },
        erCb = function(res) {
          console.log(res);
        },
        palyParam = {
          url: "/api/web/proProject/selectPreSettlementProject",
          methods: "post",
          data: "",
          success: suCb,
          error: erCb
        };
      that.$https(palyParam);
    },
    // 选择项目 - 配置属性查询
    selectMaterial(id) {
      console.log(id);
      this.disedit = true;
      let that = this,
        suCb = res => {
          console.log(res.data);
          that.diseditInfo = that.deepClone(res.data.data);
          that.diseditProId = id;
        },
        erCb = function(res) {
          console.log(res);
        },
        req = {
          url: "/api/web/proBudgetMainMaterial/selectMainMaterial",
          methods: "post",
          data: { proId: id },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 选择项目 -- 更改配置材料属性 提交
    // updateMaterial(type) {
    //   if (this.chooseMaterial.length > 0) {
    //     let arr = this.chooseMaterial.map(item => {
    //       return {
    //         mainMacId: item.mainMacId,
    //         matType: type
    //       };
    //     });
    //     let that = this,
    //       suCb = res => {
    //         console.log(res);
    //         that.$msg("选择成功!");
    //         that.selectMaterial(that.diseditProId);
    //         that.chooseMaterial = [];
    //       },
    //       erCb = function(res) {
    //         console.log(res);
    //         that.$msg("网络错误,选择失败!");
    //       },
    //       req = {
    //         url: "/api/web/proBudgetMainMaterial/updateMainMaterial",
    //         methods: "post",
    //         data: { proBudgetMainMaterial: arr },
    //         success: suCb,
    //         error: erCb
    //       };
    //     that.$https(req);
    //   }
    // },
    //全选
    handleSelectionChange(val) {
      this.chooseMaterial = val;
    },
    // 选择该项目
    chooseThisPro(id) {
      let that = this,
        suCb = res => {
          console.log(res);
          if (this.$route.query.proId) {
            that.$msg("选择成功!");
          }
          // 如果选择预结算项目弹窗是打卡的 则关闭它
          that.choosePro = false;
          // 设置当前项目id（规避风险）
          that.currentProId = id;
          // 查询表一数据
          that.tabClick("1.1");
        },
        erCb = function(res) {
          console.log(res);
          that.$erMsg("选择失败!");
        },
        req = {
          url: "/api/web/proBudgetTableCol/insertPreSettlementCount",
          methods: "post",
          data: { proId: id },
          success: suCb,
          error: erCb
        };
      // 如果当前类型是终结算 则调用另一个接口地址
      // todo：完成终结算后解除注释
      if (that.currentType == "2") {
        req.url = "/api/web/proBudgetTableCol/insertEndSettlementCount";
      }
      that.$https(req);
    },

    // 设置基础参数 查询接口
    baseConfigSelect() {
      let that = this,
        suCb = res => {
          console.log(res);
          that.baseConfigInfo = that.deepClone(res.data.data);
          this.baseConfig = true;
        },
        erCb = function(res) {
          console.log(res);
        },
        req = {
          url: "/api/web/proBudgetBaseConfig/selectProBudgetBaseConfig",
          methods: "post",
          data: { proId: that.currentProId },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },

    // 设置基础参数 提交接口
    submitForm(formName) {
      console.log(formName);
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.baseConfigUpdate();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    baseConfigUpdate() {
      let that = this,
        suCb = res => {
          console.log(res);
          if (res.data.message == "ok") {
            that.$msg("设置成功");
            that.baseConfig = false;
            that.tabClick("1.1");
            that.activeName = "first";
          }
        },
        erCb = function(res) {
          console.log(res);
        },
        req = {
          url: "/api/web/proBudgetBaseConfig/updateProBudgetBaseConfig",
          methods: "post",
          data: {
            proBudgetBaseConfig: that.baseConfigInfo,
            settlementType: that.typeName == "typeOne" ? "1" : "2"
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },

    //标签页切换
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.tabClick("1.1");
      } else if (tab.name == "second") {
        this.secondTab();
      } else if (tab.name == "fourth") {
        this.fourthTab();
      } else if (tab.name == "third") {
        this.thirdTab();
      } else {
        this.tabClick("5");
      }
      console.log(tab.name);
      this.editBtn = true;
    },
    //表一 表五 查询
    tabClick(n) {
      let that = this;
      let suCb = function(res) {
        that.tab1 = res.data.data;
        if (res.data.data.length > 0 && n == "1.1") {
          that.totalBudget =
            res.data.data.filter(item => {
              if (item.rowCode == "B1_ex_15") {
                return item.taxExcludingPrice;
              }
            })[0].taxExcludingPrice + "";
        } else if (that.totalBudget == "待计算") {
          that.totalBudget = "待计算";
        }
        console.log(res.data, that.totalBudget);
      };
      let erCb = function(res) {
        console.log(res);
      };
      // 根据当前类型判断是预结算还是终结算
      let postData = {
        proId: that.currentProId,
        sheetCode: n,
        // todo：完成终结算后解除注释
        settlementType: that.currentType == "1" ? "1" : "2"
        // settlementType: "1"
      };
      let palyParam = {
        url: "/api/web/proBudgetTableCol/selectProBugetTable15",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      // 如果没有选择id，则阻止请求，给出提示（只会发生在直接进入生成结算界面且是预结算的情况下）
      if (postData.proId) {
        that.$https(palyParam);
      } else {
        that.$erMsg("请先选择要预结算的项目！");
      }
    },
    //表二
    secondTab() {
      let that = this;
      let suCb = function(res) {
        that.aLists = res.data.data.alist;
        that.bLists = res.data.data.blist;
        console.log(res.data);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {
        proId: that.currentProId,
        sheetCode: "2",
        // todo：完成终结算后解除注释
        settlementType: that.currentType == "1" ? "1" : "2"
        // settlementType: "1"
      };
      let palyParam = {
        url: "/api/web/proBudgetTableCol/selectProBugetTable2",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    //3
    thirdTab() {
      let that = this;
      let suCb = function(res) {
        console.log(res.data);
        if (that.thirdTitle == "工程量预算表三甲") {
          that.thirdInfo = that.deepClone(res.data.data);
        } else if (that.thirdTitle == "机械使用费表三乙") {
          that.thirdTwoInfo = that.deepClone(res.data.data);
        } else {
          that.thirdThreeInfo = that.deepClone(res.data.data);
        }
      };
      let erCb = function(res) {
        console.log(res);
      };
      let palyParam = {
        url: "/api/web/proProject/queryTableThree",
        methods: "post",
        data: {
          proId: that.currentProId,
          // todo：完成终结算后解除注释
          settlementType: that.currentType == "1" ? "1" : "2"
          // settlementType: "1"
        },
        success: suCb,
        error: erCb
      };
      // 表三甲 跟 表三乙丙 的查询接口不一样
      if (that.thirdTitle == "工程量预算表三甲") {
        palyParam.url = "/api/web/proProject/queryTableThree";
      } else {
        palyParam.url = "/api/web/proTableThreeMachine/selectTableThreeMachine";
        if (that.thirdTitle == "机械使用费表三乙") {
          palyParam.data = {
            proId: that.currentProId,
            macType: "0",
            // todo：完成终结算后解除注释
            settlementType: that.currentType == "1" ? "1" : "2"
            // settlementType: "1"
          };
        } else {
          palyParam.data = {
            proId: that.currentProId,
            macType: "1",
            // todo：完成终结算后解除注释
            settlementType: that.currentType == "1" ? "1" : "2"
            // settlementType: "1"
          };
        }
      }
      that.$https(palyParam);
    },
    // 表三甲 提交
    thirdCommitA() {
      if (!this.editBtn) {
        let that = this;
        let suCb = function(res) {
          console.log(res.data);
          that.$msg("保存成功");
          that.thirdFlag = !that.thirdFlag;
          that.editBtn = !that.editBtn;
          // 这里调用一下表一的接口是为了更新总价
          that.tabClick("1.1");
          that.thirdTab();
        };
        let erCb = function(res) {
          console.log(res);
        };
        let palyParam = {
          url: "/api/web/proTableThreeNail/updateTableThreeNail",
          methods: "post",
          data: {
            proId: that.currentProId,
            proTableThreeNail: that.thirdInfo,
            settlementType: that.typeName == "typeOne" ? "1" : "2"
          },
          success: suCb,
          error: erCb
        };
        console.log(that.thirdInfo);
        that.$https(palyParam);
      }
    },
    // 表三丙/表三乙 提交
    thirdCommitBC() {
      if (!this.editBtn) {
        let data = [];
        // 深拷贝表格数据，并且对需要计算的单元格数据进行处理
        if (this.thirdTitle == "机械使用费表三乙") {
          data = this.deepClone(this.thirdTwoInfo).map(item => {
            return {
              num: item.num,
              quantity: item.num * item.quantity,
              costMoney: item.num * item.quantity * item.price,
              budgetId: item.budgetId,
              price: item.price
            };
          });
        } else {
          data = this.deepClone(this.thirdThreeInfo).map(item => {
            return {
              num: item.num,
              quantity: item.num * item.quantity,
              costMoney: item.num * item.quantity * item.price,
              budgetId: item.budgetId,
              price: item.price
            };
          });
        }
        let that = this;
        let suCb = function(res) {
          console.log(res.data);
          that.$msg("保存成功");
          that.thirdFlag = !that.thirdFlag;
          that.editBtn = !that.editBtn;
          // 这里调用一下表一的接口是为了更新总价
          that.tabClick("1.1");
          that.thirdTab();
        };
        let erCb = function(res) {
          console.log(res);
        };
        let palyParam = {
          url: "/api/web/proTableThreeMachine/updateTableThreeMachine",
          methods: "post",
          data: {
            proId: that.currentProId,
            proTableThreeMachine: data,
            settlementType: that.typeName == "typeOne" ? "1" : "2"
          },
          success: suCb,
          error: erCb
        };

        that.$https(palyParam);
      }
    },
    //4
    fourthTab() {
      console.log(this.currentProId);
      let that = this;
      let suCb = function(res) {
        console.log(res.data);
        that.fourthInfo = that.deepClone(res.data.data);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {
        proId: that.currentProId,
        matType: "0", // 0 1 2
        // todo：完成终结算后解除注释
        settlementType: that.currentType == "1" ? "1" : "2"
        // settlementType: "1"
      };
      // 根据表格标题的区别，判断传给后端的参数
      if (this.fourthTitle == "甲供设备") {
        postData.matType = "0";
      } else if (this.fourthTitle == "甲供主材") {
        postData.matType = "1";
      } else {
        postData.matType = "2";
      }
      let palyParam = {
        url: "/api/web/proBudgetMaterial/selectPreBudgetMaterial",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    // 表四 提交
    fourthCommit() {
      if (!this.editBtn) {
        // 深拷贝表格数据，并且对需要计算的单元格数据进行处理
        let param = this.deepClone(this.fourthInfo).map(item => {
          return {
            matId: item.matId,
            num: item.num,
            taxExcludingPrice: item.taxExcludingPrice,
            taxExcludingPriceSum: item.taxExcludingPrice * item.num,
            budgetId: item.budgetId
          };
        });
        console.log(param);
        let that = this;
        let suCb = function(res) {
          console.log(res.data);
          that.$msg("保存成功");
          that.fourthFlag = !that.fourthFlag;
          that.editBtn = !that.editBtn;
          // 这里调用一下表一的接口是为了更新总价
          that.tabClick("1.1");
          that.fourthTab();
        };
        let erCb = function(res) {
          console.log(res);
        };
        let palyParam = {
          url: "/api/web/proBudgetMaterial/updateProBudgetMaterial",
          methods: "post",
          data: {
            proId: that.currentProId,
            proBudgetMaterial: param,
            settlementType: that.typeName == "typeOne" ? "1" : "2"
          },
          success: suCb,
          error: erCb
        };
        that.$https(palyParam);
      }
    },
    // 下拉菜单 事件处理函数
    handleCommand(command) {
      if (
        command == "工程量预算表三甲" ||
        command == "机械使用费表三乙" ||
        command == "仪表使用费表三丙"
      ) {
        this.activeName = "third";
      }

      if (this.activeName == "third") {
        this.thirdTitle = command;
        this.thirdTab();
      }
    },
    handleCommand1(command) {
      if (command == "甲供设备" || "甲供主材" || "乙供主材") {
        this.activeName = "fourth";
      }

      if (this.activeName == "fourth") {
        this.fourthTitle = command;
        this.fourthTab();
      }
    },
    // 编辑按钮 事件处理函数
    edit(tab) {
      switch (tab) {
        case 3:
          this.thirdFlag = !this.thirdFlag;
          break;
        case 4:
          this.fourthFlag = !this.fourthFlag;
          break;
        case 5:
          this.fifthFlag = !this.fifthFlag;
          break;
      }
      this.editBtn = !this.editBtn;
    },
    commit(tab) {
      switch (tab) {
        case 3:
          if (this.thirdTitle == "工程量预算表三甲") {
            this.thirdCommitA();
          } else {
            this.thirdCommitBC();
          }
          break;
        case 4:
          this.fourthCommit();
          break;
        case 5:
          break;
      }
    },
    setBaseConfig(tab) {
      this.baseConfig = true;
    },
    // 合计  -- element自带的合计函数 进行修改
    getSummaries(param, unit) {
      // 获取列 和 表格数据
      const { columns, data } = param;
      console.log(param);
      const sums = [];
      // 对列进行遍历操作
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        // 转数字
        const values = data.map(item => Number(item[column.property]));
        // 最后两列的数据进行合计
        if (index == columns.length - 2 || index == columns.length - 1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 显示结果+上传入的单位
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = "- -";
        }
      });
      return sums;
    },
    // 保存该项目
    saveThisProject() {
      console.log(this.currentProId, this.currentType);
      if (this.currentType == "1") {
        //  保存预结算以后跳转至结算项目列表 且类型为预结算
        if (this.currentProId) {
          this.$confirm("确认保存吗？确认后将不能再次修改！")
            .then(_ => {
              let that = this;
              let suCb = function(res) {
                console.log(res.data);
                that.$msg("保存预结算成功");
                that.$router.push({
                  name: "finalCostTable",
                  query: { proType: "1" }
                });
              };
              let erCb = function(res) {
                console.log(res);
              };
              let palyParam = {
                url: "/api/web/proProject/updateProProgressStatus",
                methods: "post",
                data: {
                  proId: that.currentProId,
                  settlementStatus: "1"
                },
                success: suCb,
                error: erCb
              };
              that.$https(palyParam);
            })
            .catch(_ => {});
        } else {
          this.$erMsg("请先选择项目并进行数据修改！");
        }
      } else {
        //  保存预结算以后跳转至结算项目列表 且类型为终结算
        this.$confirm("确认保存吗？确认后将不能再次修改！")
          .then(_ => {
            let that = this;
            let suCb = function(res) {
              console.log(res.data);
              that.$msg("保存终结算成功");
              that.$router.push({
                name: "finalCostTable",
                query: { proType: "2" }
              });
            };
            let erCb = function(res) {
              console.log(res);
            };
            let palyParam = {
              url: "/api/web/proProject/updateProProgressStatus",
              methods: "post",
              data: {
                proId: that.currentProId,
                settlementStatus: "2"
              },
              success: suCb,
              error: erCb
            };
            that.$https(palyParam);
          })
          .catch(_ => {});
      }
    }
  }
};
</script>

<style scoped>
.component-listHeader .search-header {
  width: 1150px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: none;
  background-color: rgba(255, 255, 255, 1);
  margin: 30px auto 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 110px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-form-item {
  width: 310px;
  margin-bottom: 20px !important;
}
.component-listHeader .search-header .right button:hover {
  background-color: #1abc9c;
  color: #fff;
}
.component-listHeader .search-header .right .right-select-margin {
  margin-top: 8px;
  margin-right: 8px;
}
/* 处理a链接 */
a {
  text-decoration: none;
  color: #1abc9a;
}
a:hover {
  cursor: pointer;
}

.component-makeBudget .tabs-header {
  width: 1150px;
  box-sizing: border-box;
  margin: 0 auto 0;
}

.fl_container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.fl_container .fl_left {
  text-align: left;
}
.fl_container .fl_right {
  text-align: right;
}

/* 表格部分 */
.budget {
  margin-top: 20px;
  width: 100%;
  overflow: hidden;
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
.budget .title {
  float: left;
}
.budget div:last-of-type {
  float: right;
}
.gcl .tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}

.budgetTable table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.budgetTable table td,
th {
  height: 40px;
}

th {
  background-color: #f9fafc;
}

.gcl_footer {
  text-align: right;
  margin: 20px 0 0 0;
}

.gcl_footer .gcl_footer_bottom span {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  margin-right: 2px;
  font-size: 19px;
}

/* 双表格容器 */
.dbTable {
  display: flex;
  justify-content: space-between;
}

.dbTable .budgetTable {
  width: 540px;
}

.component-model .component-listHeader .search-header {
  width: 900px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-model .component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-model .component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-model
  .component-listHeader
  .search-header
  .right
  .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.component-model .table {
  width: 100%;
  margin: 0 auto;
}

.underTable {
  width: 100%;
  margin: 25px 0 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}
</style>
